<template>
    <div>
       <div class="title" style="font-size: 30px;padding-bottom: 20px;">
        <h1>/vuex的安装与使用篇/</h1>
        <el-divider content-position="right">--加油！--</el-divider>
        </div>
        <div class="content">
            <span>
          <h2>一、vuex的安装与其管理文件路径配置</h2>
          <el-divider></el-divider>
          <h3>1.官方解释：vuex是一个专为vue.js应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有的状态，
            并以相应的规则保证状态以一种可预测的方式发生变化。</h3>
            <h3>2.vuex的学习可看此内容<el-link type="info" href="https://baijiahao.baidu.com/s?id=1713642753698731865&wfr=spider&for=pc">点击跳转</el-link></h3>
          <h3>3.说明：安装vuex是为了使用vuex进行事件通信(就是实现header区按钮点击,aside区的导航栏折叠/展开)</h3>
          <h3>4.下载安装vuex的相关依赖(同样，版本不宜过高,需指定版本)</h3>
          <h4>->npm install vuex@3.6.2</h4>
          <h3>5.安装完成，在项目根目录下建文件夹store，并在store下建index.js与tab.js文件（store下管理的文件为项目的配置文件）</h3>
          <h3>6.在src文件夹下的main.js里全局引入vuex的项目配置文件</h3>
          <span><img src="../../src/assets/image/learn2-13.png" alt="" /></span>
        </span>
        <span>
            <el-divider></el-divider>
          <h2>二、store文件夹下的文件配置与使用</h2>
          <el-divider></el-divider>
          <h3>1.index.js文件需要引入vue，vuex</h3>
          <span><img src="../../src/assets/image/learn5-1.png" alt="" /></span>
          <h3>2.tab.js文件夹需要引入到上面这个index.js里</h3>
          <span><img src="../../src/assets/image/learn5-2.png" alt="" /></span>
        </span>
        <span>
            <el-divider></el-divider>
          <h2>三、header区按钮点击控制aside区的导航栏折叠/展开功能的实现</h2>
          <el-divider></el-divider>
          <h3>1.在tab.js中定义header区按钮点击控制aside区的导航栏折叠/展开功能</h3>
          <span><img src="../../src/assets/image/learn5-3.png" alt="" /></span>
          <h3>2.接下来，在commonAside.vue组件页面中拿vuex中的state属性</h3>
          <h3>3.首先，在commonAside.vue中全局注入，在computed的属性下，通过this.$store拿在tab.js文件里定义好的isCollapse这个属性，</h3>
          <span><img src="../../src/assets/image/learn5-4.png" alt="" /></span>
          <h3>4.然后就可以在commonAside.vue导航条里拿在tab.js文件里定义好的isCollapse这个属性</h3>
          <span><img src="../../src/assets/image/learn5-5.png" alt="" /></span>
          <h3>5.再接下来，需要点击header部分的按钮时，去改变vuex中state的状态</h3>
          <span><img src="../../src/assets/image/learn5-6.png" alt="" /></span>
          <h3>6.在commonHeader.vue组件中,给按钮绑定一个事件handleMenu</h3>
          <h3>7.将handleMenu定义在methods下，可以在这个方法里改变state中isCollapse的值，因为collapseMenu定义了取反方式，
              这里commit提交了这个方式，之后点击就可以实现展开或折叠导航栏啦！</h3>
              <span><img src="../../src/assets/image/learn5-7.png" alt="" /></span>
        </span>
        </div>
    </div>
</template>

<style lang="less" scoped>
.content{
    text-align:left;
    h2{
        font-size: 25px;
    }
    h3,h4{
        font-size: 20px;
        margin: 10px 0;
    }
}
</style>

<script>
export default{
    name: 'vueLearn5',
    data() {
        return {}
    }
}
</script>